.InvitePeople{
    background-color: #3A5EF4;
    min-height: 100vh;
    .headImgs{
        width: 375px;
        height: 232px;
        background-size: contain;
        background-repeat: no-repeat;
        top: 0;
        left: 0;
        z-index: 0;
        &.ihoneX{
            height: 250px;
        }
    }
    .InviteData{
        width: 355px;
        height: 89px;
        background-color: #FFFFFF;
        color: #333333;
        position: relative;
        font-size: 12px;
        border-radius: 10px;
        margin: -46px 10px 0;
        display: flex;
        text-align: center;
        justify-content: space-around;
        padding: 19px 0;
        font-weight:400;
        .toll{
            font-size: 18px;
            color: #3A5EF4;
            font-weight:700;
        }
        .text{
           padding-bottom: 10px;
        }
        .line{
            width: 0.5px;
            height: 43.5px;
            background: #cecece;
        }
       
    }
    .btn{
        display: flex;
        justify-content: space-around;
        .txt{
            display: flex;
            justify-content: center;
            align-items: center;
            margin-top: 6px;
            font-size: 14px;
            font-weight: 700;
        }
        .bot_t{
            position: relative;
            .click{
                width: 36px;
                height: 39px;
                position: absolute;
                // left: 85%;
                // top: 40%;
                animation: handleClick 1s infinite ease-in-out;
                right: -5px;
                bottom: -5px;
			
            }
        }
       .friends{
            height: 33px;
            width: 147px;
            margin: 20px 0;
            border-radius: 14px;
            font-size: 13px;
            position: relative;
            background-image: linear-gradient(0deg,#fed461 0%, #fae27b 100%);
            box-shadow: 1.25px 2.17px 0px 2.5px rgba(245,147,49,0.75); 
            color: #DE511C;
       }
       .bot_s{
        // height: 33px;
        // width: 140px;
        // margin: 20px 0;
        // border-radius: 14px;
        // background-image: linear-gradient(0deg,#ff3a57 0%, #ff7389 100%);
        // box-shadow: 1.25px 2.17px 0px 2.5px rgba(233,23,41,0.75); 
        .posters{
            color: #FFFFFF;
            height: 33px;
            width: 147px;
            margin: 20px 0;
            border-radius: 14px;
            font-size: 13px;
            position: relative;
            background-image: linear-gradient(0deg,#ff3a57 0%, #ff7389 100%);
            box-shadow: 1.25px 2.17px 0px 2.5px rgba(233,23,41,0.75); 
            // color: #DE511C;
        }
   }
    }

    .activity{
        width: 355px;
		// min-height: 85px;
		background: #ffffff;
		border-radius: 10px;
		margin: 20px auto 0;
        color: #333333;
        .title{
            text-align: center;
            padding: 18px 0;
            font-size: 18px;
            font-weight: 700;
            .left{
                width: 16px;
                height: 3px;
                background-image: linear-gradient(-90deg,#3a5ef4 0%, rgba(58,94,244,0.00) 100%);
                border-radius: 1.5px;
                margin: 5px 0;
                display: inline-block;
            }
            .right{
                width: 16px;
                height: 3px;
                background-image: linear-gradient(#3a5ef4 0%, rgba(58,94,244,0.00) 100%);
                border-radius: 1.5px;
                margin: 5px 0;
                display: inline-block;
            }
        }
        .head{
            font-weight: 700;
        }
        .detail{
            font-size: 11px;
            padding: 0 17px 22px;
            font-weight: 400;
            line-height: 22px;
        }
    }
    .task{
        display: flex;
        padding: 20px 20px;
        justify-content: space-between;
        .taskImg{
            width: 30px;
            height: 30px;
        }
        .task_left{
            display: flex;
        }
        .state{
            height: 23px;
            width: 60px;
            font-size: 12px;
            text-align: center;
            color: #B26615;
          
            border-radius: 12px;
            background-image: linear-gradient(0deg,#ffce6c 0%, #fff18c 100%);
            border: 0.5px solid #ebb953;
        }
        .state_w{
            background: #FFFBE6;
            color: #B26615;
            border: none;
            height: 23px;
            width: 60px;
            font-size: 12px;
            text-align: center;
          
            border-radius: 12px;
        }
        .task_info{
            margin: 0 7px;
            font-size: 11px;
            color: #333333;
            width: 199px;
            .circle{
                // display: inline;
                height: 10px;
                width: 10px;
                margin-left: -4px;
            }
            .nut-progress .nut-progress-outer {
                background: #C3CFFF!important;
            }
 
        }
    }
    .rules{
        padding-bottom:24px;
        margin: 0 27px 0 57px;
        position: relative;
        &:last-child .line{
            display: none!important;
         
        }
        .stage{
            display: flex;
            justify-content: space-between;
            background: #F0F3FF;
            padding: 11px 19px;
            border-radius: 5px;
        }
        .triangle {
            width: 0;
            height: 0;
            border-right: 6px solid #f0f3ff;
            border-top: 11px solid transparent;
            border-bottom: 6px solid transparent;
            position: absolute;
            left: -1%;
            top: 17%;
            // background: #f0f3ff;
        }
    }
    .line{
        height: 50px;
        position: absolute;
        left: -13%;
        top: 43%;
        width: 2.5px;
        background: #d5d5d5;
        border-radius: 1.5px;
    }
    .round{
        width: 17px;
        height: 16px;
        position: absolute;
        top: 19%;
        left: -13%;
        z-index: 1;
        }
  
    .Concern{
        margin-top: -46px;
        position: relative;
    }
    .star_strategy{
        padding-bottom: 0px;
     }

    .strategy_t{
        padding-bottom: 56px;
    
    }
    .strategy{
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 27px 26px;
        .left{
            width: 25px;
            height: 16px;
            position: relative;
            top: -37px;
        }
        .Code{
            .icon{
                position: relative;
                width: 55px;
                margin-bottom: 11px;
                height: 55px;
                background: #f0f3ff;
                border-radius: 50%;
            }
            .code_t{
                position: absolute;
                width: 28px;
                height: 28px;
                top: 15px;
                left: 14px;
            }
            h2{
                font-size: 12px;
                color: #3A5EF4;
                font-weight: 700;
            }
            .msg{
                font-size: 11px;
                font-weight: 400;
                text-align: center;
                color: #333333;
                width: 66px;
                padding-top: 10px;
            }
        }
    }
    @keyframes handleClick {
		0%,100% {
			right: -5px;
			bottom: 0px;
		}
		50% {
			right: -10px;
			bottom: -10px;
		}
	}
}